<template>
	<view class="main">
		<view class="status-bar">
		</view>
		<view class="neirong">
			<view class="address" @click="state.show=true">
				<text>{{state.address}}</text>
				<image src="../../static/home_icon_more1@2x.png" mode=""></image>
			</view>
			<view class="titles">
				首页
			</view>
			<!-- 顶部右侧图标 -->
			<view class="icons">
				<image src="../../static/home_icon_news@2x.png" mode=""
					@click="sheep.$router.go('/pages/index/message')"></image>
				<image src="../../static/home_icon_qiandao@2x.png" mode=""
					@click="sheep.$router.go('/pages/index/sign')"></image>
			</view>
		</view>
		<!-- 地区选择 -->
		<scroll-view scroll-y="true" lower-threshold="80" @scrolltolower="getGoodsList" class="content">
			<!-- 轮播图 -->
			<view class="swiper">
				<u-swiper :list="state.swiper" indicator indicatorActiveColor="#1BDDD0" height="150"
					indicatorInactiveColor="#FFFFFF" indicatorMode="line" circular></u-swiper>
			</view>
			<!-- 精选推荐 -->
			<view class="featured">
			   
				<view class='tuimg'><image src="../../static/home_icon_jb@2x.png" mode="" class=""></image></view>
				<view class="lable" @click="sheep.$router.go('/pages/index/recommend')">
					
					<view class="left">
						<image src="../../static/home_icon_tuijian@2x.png" mode=""></image>
						<text>精选推荐</text>
					</view>
					<view class="right">
						<text>更多</text>
						<image src="../../static/icon_more_zt@2x.png" mode=""></image>
					</view>
				</view>
				<view class="list" v-if="state.tuiList.length>0">
					<view class="block" v-for="(item,index) in state.tuiList" :key="index"
						@click="sheep.$router.go('/pages/index/detail?id='+item.id+'&type=1')">
						<view class="img">
							<image :src="item.show_image" mode=""></image>
						</view>
						<view class="title">
							<image src="../../static/icon_v@2x.png" mode=""></image>
							<text class="ov1">{{item.title}}</text>
						</view>
						<view class="infos ov1">
							{{item.city_name}}·{{item.age}}岁·{{item.height}}cm
						</view>
						<template v-for="(v,k) in item.lable_arr.show_lable">
							<view v-if="k==0" class="type" :style="{'background':v.color}">
								<image :src="v.icon_image" mode=""></image>{{v.lable}}
							</view>
						</template>
					</view>
				</view>
				<view class="wu" v-else>
					<image :src="state.url+'/useimage/chat_list.jpg'" mode=""></image>
					<!-- <image src="https://laiyu.1122334455.cn/useimage/chat_list.jpg" mode=""></image> -->
					<view class="cnei"> 该地区没有团长入驻，联系客服申请开通</view>
					<view class="lian" @click="router('/pages/index/chat')">联系客服</view>
				</view>
			</view>
			<!-- 种类列表 -->
			<view class="kinds">
				<view class="kind">
					<view :class="state.tabed==val.id?'tabed':'tab'" v-for="val,index in state.kind" :key="index"
						@click="select(val.id)">
						{{val.lable}}
						<view v-if="state.tabed==val.id"></view>
					</view>
				</view>
				<navigator class="search" url="/pages/index/sousuo">
					<image src="../../static/home_icon_search@2x.png" mode=""></image>
				</navigator>
			</view>
			<view class="all_list">
				<view class="block" v-for="item,index in state.list" :key="index"
					@click="sheep.$router.go('/pages/index/detail?id='+item.id+'&type=1')">
					<view class="img">
						<image :src="item.show_image" mode=""></image>
					</view>
					<view class="title">
						<image src="../../static/icon_daoyou@2x.png" mode="" v-if="item.guide==1"></image>
						<!-- <image src="../../static/icon_v@2x.png" mode="" v-if="item.auth_type==3"></image> -->
						<text class="ov1">{{item.title}}</text>
					</view>
					<view class="infos ov1">
						{{item.city_name}}·{{item.age}}岁·{{item.height}}cm
					</view>
					<view class="allBox">
						<template v-for="(v,k) in item.lable_arr.show_lable">
							<view class="type" :style="{'background':'#1BDDD0'}" v-if="k<2">
								{{v.lable}}
							</view>
						</template>
					</view>

				</view>
			</view>
			<view class="concat" @click="sheep.$router.go('/pages/index/message')">
				<image src="../../static/home_icon_kefu@2x.png" mode=""></image>
			</view>
		</scroll-view>
		<!-- 地图选择 -->
		
		<u-picker :show='state.show' :defaultIndex="[0]" @cancel="state.show=false" :columns="state.columns"
			@change="confirm" @confirm="isDz" keyName="name"></u-picker>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app';
	const state = reactive({
		show: false,
		columns: [],
		list: [],
		pageSize: 10,
		hasMore: true,
		isLoad: false,
		page: 1,
		titleStyle: 'fontWeight:bold',
		address: '北京市',
		addressId: 2,
		swiper: [
			'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			'https://cdn.uviewui.com/uview/swiper/swiper2.png',
			'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		],
		tuiList: [],
		kind: [],
		tabed:'',
		url:'',
	});
	onLoad((options) => {
		state.addressId = uni.getStorageSync('addressId')||2
		state.address =  uni.getStorageSync('address')||'北京市'
		getConfigSet() //banner图
		getlableIndex() //获取分类
		// getLocat()//获取定位
		getNews() //获取推荐
		newsDatas() //获取更多信息
		getAddress()
		state.url = import.meta.env.BUZHENG_BASE_URL
        console.log(state.url,'state.url')
	});
     onShow((options) => {
		state.addressId = uni.getStorageSync('addressId')||2
		state.address =  uni.getStorageSync('address')||'北京市'
	});
	function getdeng() {
		plus.oauth.getServices(function(services) {
			let weixinOauth = null;
			for (let i in services) {
				let service = services[i];
				// 获取微信登录对象 
				if (service.id == 'weixin') {
					weixinOauth = service;
					break;
				}
			}
			weixinOauth.authorize(function(event) {
				const {
					code
				} = event
				console.log(code)

			}, function(err) {})
		}, function(err) {})
	}
	//获取地区
	function getCode() {
		plus.oauth.getServices(function(services) {
			let weixinOauth = null;
			for (let i in services) {
				let service = services[i];
				// 获取微信登录对象 =
				if (service.id == 'weixin') {
					weixinOauth = service;
					break;
				}
			}
			weixinOauth.authorize(function(event) {
				console.log(event)
				const {
					code
				} = event
				console.log(code)
			})
		})
	}

	function isDz(e) {
		console.log()
		let index1 = []
		for(let key in e.indexs){
			index1.push(e.indexs[key])
		}
		uni.setStorageSync('addressId', e.value[index1.length-1].id=='1'?'2':e.value[index1.length-1].id)
		uni.setStorageSync('address', e.value[index1.length-1].name)
		state.addressId = e.value[index1.length-1].id=='1'?'2':e.value[index1.length-1].id
		state.address = e.value[index1.length-1].name
		state.show = false
		getNews() //获取推荐
		newsDatas() //获取更多信息
	}
	async function getAddress() {
		const {
			code,
			data
		} = await sheep.$api.zqzApi.area({
			level: 1,
			pid: 0
		})
		state.columns.push(data)
		getAddress1(2, data[0].id)
	}
	async function getAddress1(level, pid, type) {
		const {
			code,
			data
		} = await sheep.$api.zqzApi.area({
			level: level,
			pid: pid
		})
		if (type == 1) {
			state.columns[1] = data
		} else {
			state.columns.push(data)
		}
		// getAddress2(3, data[0].id, type)
	}
	async function getAddress2(level, pid, type) {
		const {
			code,
			data
		} = await sheep.$api.zqzApi.area({
			level: level,
			pid: pid
		})
		if (type == 1) {
			state.columns[2] = data
		} else {
			state.columns.push(data)
		}
	}

	//获取页面信息
	async function getNews(type) {
		const {
			code,
			data
		} = await sheep.$api.zqzApi.indexNews({
			recommend: 1,
			city_id: state.addressId
		})
		if (code == 1) {
			state.tuiList = data.list
		}
	}

	function confirm(val) {
		let data = state.columns[val.columnIndex][val.index]
		if (data.level == '1') {
			getAddress1(2, data.id, 1)
		}
		// if (data.level == '2') {
		// 	getAddress2(3, data.id, 1)
		// }
	}

	function newsDatas() {
		state.page = 1
		state.hasMore = true
		state.isLoad = false
		state.list = []
		getGoodsList()
	}
	async function getGoodsList() {
		if (state.isLoad) return false
		if (!state.hasMore) return false
		state.isLoad = true
		const {
			code,
			data
		} = await sheep.$api.zqzApi.indexNews({
			lable_id: state.tabed,
			city_id: state.addressId,
			page: state.page,
			limit: state.pageSize,
		})
		if (code == 1) {
			let list = data.list
			let hasmore = list.length === state.pageSize
			list = state.list.concat(list)
			state.hasMore = hasmore
			state.list = list
			state.isLoad = false
			state.page = state.page + 1
		}
	}
	// banner图
	async function getConfigSet() {
		const {
			code,
			data
		} = await sheep.$api.test.configSet({
			config: 'banner'
		})
		if (code == 1) {
			state.swiper = data
		}
	}
	// 标签分类
	async function getlableIndex() {
		const {
			code,
			data
		} = await sheep.$api.test.lableIndex({})
		if (code == 1) {
			let arr = [{
				color:'',
				create_time_text:'',
				id:'',
				lable:'全部',
				status_text:'',
			}]
			state.kind = arr.concat(data)
			
		}
	}
	// 获取定位地址
	function getLocat() {
		uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			geocode: true,
			success: function(res) {
				console.log(res, '达到发达省份')
				const latitude = res.latitude;
				const longitude = res.longitude;
			},
			fail: (e) => {
				console.log(e)
			}
		});
	}
	// 倒计时
	function select(e) {
		state.tabed = e
		newsDatas()
	}
</script>
<style lang="scss">
	.wu{
		text-align: center;
		padding:20rpx;
		image{
			width:280rpx;
			height: 234rpx;
		}
		.cnei{
			line-height: 50rpx;
			font-size:28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.lian{
			margin: 10rpx auto 0;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #1BDDD0;
			border-radius: 32rpx;
			color: #fff;
			font-size: 28rpx;
		}
		
	}
	.ov1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;

		.main {
			height: 100%;
			width: 100%;

			// .top {
			// 	width: 100% !important;
			// 	z-index: 1 !important;

				.status-bar {
					height: var(--status-bar-height);
					width: 100%;
				}

				.neirong {
					position: relative;
                    line-height: 80rpx;
				    height: 80rpx;
					.titles {
						// width: 100%;
						text-align: center;
						font-weight: bold;
						position: absolute;
						width: 40%;
						top: 20rpx;
						left: 30%;
						z-index: 99999999999999999999999999;
						color: #333;
					}

					.address {
						display: flex;
						align-items: center;
						position: absolute;
						z-index: 99999999999999999999999999;
						left: 32rpx;
						top: 20rpx;

						text {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						image {
							height: 24rpx;
							width: 24rpx;
						}
					}

					.icons {
						display: flex;
						width: 20%;
						position: absolute;
						z-index: 99999;
						right: 0;
						top: 30rpx;

						image {
							margin-right: 32rpx;
							height: 48rpx;
							width: 48rpx;
						}
					}
				}
			// }


			.content {
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				background-color: #F5F5F5;
				height: 100%;

				.swiper {
					width: 100%;
					border-radius: 24rpx;
					overflow: hidden;
					background: #333333;
				}

				.featured {
					margin: 24rpx 0 32rpx;
					padding: 32rpx 24rpx 24rpx;
					border-radius: 24rpx;
					// background: url(../../static/home_icon_jb@2x.png);
					background: #fff;
					position: relative;
					.tuimg{
						position:absolute;
						top:0;
						left:0;
						border-radius: 24rpx;
						z-index:0;
						width: 100%;
						height: 100rpx;
						image{
							width: 100%;
							height: 100rpx;
						}
					}

					.lable {
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
						justify-content: space-between;
						z-index: 111;
                            position: relative;
						.left {
							display: flex;
							align-items: center;

							image {
								height: 48rpx;
								width: 48rpx;
							}

							text {
								margin-left: 12rpx;
								font-size: 32rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #333333;
							}
						}

						.right {
							display: flex;
							align-items: center;

							text {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #999999;
							}

							image {
								height: 32rpx;
								width: 32rpx;
							}
						}
					}

					.list {
						display: flex;
						align-items: center;
						// flex-wrap: nowrap;
						width: 100%;
						overflow-x: scroll;

						.block {
							width: 250rpx;
							height: 416rpx;
							background: #F8F8F8;
							border-radius: 24rpx;
							margin-right: 20rpx;
							display: inline-block;

							.img {
								width: 250rpx;
								height: 240rpx;
								border-radius: 24rpx 24rpx 0 0;
								overflow: hidden;

								image {
									width: 250rpx;
									height: 240rpx;
								}
							}

							.title {
								display: flex;
								align-items: center;
								margin: 16rpx;
								
								image {
									height: 32rpx;
									width: 32rpx;
								}

								text {
									font-size: 32rpx;
									color: #333333;
									margin-left: 8rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
								}
							}

							.infos {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #A5A5A5;
								margin: 4rpx 16rpx 8rpx;
							}

							.type {
								width: 150rpx;
								height: 42rpx;
								border-radius: 30rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #333;
								margin: 0 16rpx;
								display: flex;
								align-items: center;
								justify-items: center;
								image{
									margin-right: 5rpx;
									margin-left: 5rpx;
									width: 32rpx;
									height: 32rpx;
								}
							}
						}
					}
				}

				.kinds {
					display: flex;
					align-items: center;

					.kind {
						display: flex;
						align-items: center;
						overflow-x: scroll;

						.tab {
							font-size: 28rpx;
							white-space: nowrap;
							margin-right: 42rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							display: inline-block;
						}

						.tabed {
							font-size: 36rpx;
							white-space: nowrap;
							margin-right: 42rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
							display: inline-block;

							view {
								margin-top: -12rpx;
								width: 72rpx;
								height: 20rpx;
								background: linear-gradient(180deg, rgba(27, 221, 208, 0.5) 0%, rgba(27, 221, 208, 0) 100%);
								border-radius: 10rpx;
							}
						}
					}

					.search {
						height: 82rpx;
						width: 92rpx;

						image {
							height: 82rpx;
							width: 92rpx;
						}
					}
				}

				.all_list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;
					width: 100%;
					padding-bottom: 100rpx;
					background-color: #F5F5F5;

					.block {
						width: 48%;
						height: 518rpx;
						background: #F8F8F8;
						border-radius: 24rpx;
						background-color: #fff;
						margin-bottom: 24rpx;

						.img {
							width: 100%;
							height: 332rpx;
							border-radius: 24rpx 24rpx 0 0;
							overflow: hidden;

							image {
								width: 100%;
								height: 332rpx;
							}
						}

						.title {
							display: flex;
							align-items: center;
							margin: 20rpx 24rpx 4rpx;

							image {
								height: 32rpx;
								width: 32rpx;
							}

							text {
								font-size: 32rpx;
								color: #333333;
								margin-left: 8rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
							}
						}

						.infos {
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #A5A5A5;
							margin: 4rpx 24rpx 12rpx;
						}

						.type {
							width: 120rpx;
							height: 35rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
							border-radius: 30rpx;
							font-size: 22rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #fff;
							margin-left: 5rpx;
						}
						.type:nth-child(1){margin-left: 0;}
					}
				}

				.concat {
					position: fixed;
					right: 0rpx;
					top: 50%;
					height: 128rpx;
					width: 128rpx;
					z-index: 9999;

					image {
						height: 128rpx;
						width: 128rpx;
					}
				}

			}
		}
	}

	.allBox {
		width: calc(100% - 40rpx);
		height: auto;
		display: flex;
		padding-left: 20rpx;
		padding-right: 20rpx;
		// justify-content: space-between;
	}

	.allBox .type:nth-child(1) {
		margin: 0;
	}
</style>